<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <link type="text/css" href="styles/base/ui.all.css" rel="stylesheet" />
    <style type="text/css" media="screen">
        @import url("styles/gb.css");
		@import url("styles/autocomplete/jquery.autocomplete.css");
    </style>
    <script type="text/javascript" src="scripts/jquery.min.js "></script>
    <script type="text/javascript" src="scripts/jquery.parsequery.js" ></script>
    <script type="text/javascript" src="scripts/jquery-jtemplates.js"></script>
    <script type="text/javascript" src="scripts/jquery.corner.js"></script>
    <script type="text/javascript" src="scripts/ui/jquery-ui-1.7.2.custom.js"></script>
    <script type="text/javascript" src="scripts/ui/ui.datepicker.js"></script>
    <script type="text/javascript" src="scripts/flowplayer/flowplayer-3.1.4.min.js"></script>
    <script type="text/javascript" src="scripts/date.js"></script>
	<script type="text/javascript" src="scripts/jquery.timeago.js"></script>
	<script type="text/javascript" src="scripts/jquery.autocomplete.min.js"></script>
	<script type="text/javascript" src="scripts/jquery.ThreeDots.min.js"></script>
	<script type="text/javascript" src="scripts/navigation.js"></script>
    <script type="text/javascript" src="scripts/jquery.easing.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.lavalamp.min.js"></script>
	<script type="text/javascript" src="scripts/player.js"></script>
	<script>
        var query_vars;
		var db_name;
		var tag_id_to_row = new Array();
	   var tag_to_remove;
        $(function() {

           query_vars = $.parseQuery();
		   db_name = findDBName();
		   var tag_proj = query_vars.tag.split(":", 2);
		   var tag_name = tag_proj[0];
		   var project_name = tag_proj[1];

		   
		   
		   $('#c_name').text(tag_name);
		   if (project_name) {
				$('#project_name')
				.text(project_name)
				.attr('href', 'project.html?name=' + project_name);
				
		   }
		   $('#c_description').append('<a href="/_wikid/wiki.html?'+ query_vars.tag +'">Topic Wiki</a>');
		   
           $.getJSON("/"+db_name+"/_design/tags/_view/by_tag/?key=%22"+ query_vars.tag +"%22&callback=?", function(data){
    			// attach the template
				$("#list_table").setTemplateElement("list_table_template");
		
				// process the template
				$("#list_table").processTemplate(data);
				$("abbr.timeago").timeago();
				//$(".description").ThreeDots({max_rows:1, whole_word:false});
				buildStreams(data);
				
           });
		   
		   
		   	$('#removeTagDialog').dialog({
			    	autoOpen: false,
			    	resizable: false,
		            modal: true,
					buttons: {
						'Ok': function() {
						   $(this).dialog('close');
						   var doc = {};
						   doc._id = tag_id_to_row[tag_to_remove].value._id;
						   doc._rev    = tag_id_to_row[tag_to_remove].value._rev;
						   var data = JSON.stringify(doc);
							$.ajax({
							   type: "DELETE",
							   url: "/" + db_name + "/" + doc._id + "?rev=" + doc._rev,
							   success: function(msg){
								 $('#row-' + tag_to_remove ).hide();
							   }
							});
						},
						'Cancel' : function() {
							$(this).dialog('close');
						}
					},
					close: function() {}
		    });
		   
        });
		
		var loadedCountdown;
		var mediaURL;
		var playlist = [];
		
		
		// This method it very bad for performance. We should be re-writing the 
		// first query to return this info!
		function buildStreams(data) {
			loadedCountdown = data.rows.length;
			$.each(data.rows, function(i, val) {
				tag_id_to_row[this.id] = val;
				// Since 0.9 you can also issue POST requests to views where you can send the following JSON structure in the body:
				// {"keys": ["key1", "key2", ...]}
				
				$.getJSON("/" + db_name + "/" + val.value.conversation + "/?callback=?", function(c_data){
					mediaURL = c_data.media.url;
					var clip = {};
					
					clip.streams = [];
					
					var streamInfo = {};
					streamInfo.url = c_data.media.media;
					streamInfo.start = val.value.mediaOffset;
					//streamInfo.duration = val.value.duration;
					streamInfo.id = val.value._id;
					streamInfo.saved_duration = val.value.duration;
					clip.streams.push(streamInfo);
					
					playlist[i] = clip;
					loadedCountdown--;
					if (loadedCountdown == 0) {
					
						//console.log("All streams loaded!");
						//console.dir(playlist);
						installFlowplayerForMediaStream('fms', mediaURL, playlist, loadedComplete);
						//console.dir(playlist[0]);
						
					}
				});
			});
		}
		
		function deleteTag(tagId) {
		    tag_to_remove = tagId;
		    $('#removeTagDialog').dialog('open');
			
			//
			return false;
		}
		
		function loadedComplete(clip) {
			//console.log('done loading');
			//console.dir(clip);
			$(".row").css('background-color', 'white');
			$("#" + clip.streams[0].id).css('background-color', 'yellow');
			var start = clip.streams[0].start * 1000;
			var cue = start + (clip.streams[0].saved_duration * 1000);
			clip.onCuepoint(cue, function() {
				//console.log('cue point reaced!');
				var clipIndex = $f().getClip().index;  
				++clipIndex;  
				$f().play(clipIndex);  
			});
		}
		
    </script>
  </head>
  <body class="primary-4">
	<div id="header"></div>
  
    <div id="content" data-corner="left right 20px">
		<div id="conversation_details">
			<div class="font-2"><span id="c_name"></span></div>
			<div class="font-2"><a id="project_name"></a></div>
			<span id="c_description"></span>
		</div>
		<div id="fms"></div>
	   <div id="list_table" class="jTemplatesTest"></div>
    </div>
	
	<div id="removeTagDialog" style="display: none;" title="Remove Tag...">
		Are you sure you want to remove this tag?
	</div>
	
	<!-- Template content (Valid XHTML 1.1) -->
	<p style="display: none;"><textarea id="list_table_template" rows="0" cols="0">
		<table>
			<tr>
				<td>Date</td>
				<td>Conversation</td>
				<td>When</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td>Actions</td>
			</tr>
			{#foreach $T.rows as row}
                        <tr id="row-{$T.row.value._id}" class="row">
							<td><abbr class="timeago" title="{$T.row.value.start}">{$T.row.value.start}</abbr></td>
                            <td><a href="conversation.html?name={$T.row.value.conversation}&time={$T.row.value.mediaOffset}">{$T.row.value.conversation}</a></td>
							<td>@ {$T.row.value.mediaOffset} </td>
							<td>seconds for</td>
							<td> {$T.row.value.duration} seconds</td>
							<td class="description"><span class="ellipsis_text"> {$T.row.value.description}</span></td>
							<td>
							   {#if $T.row.value.icons}
							   {#foreach $T.row.value.icons as icon}
							       <img src="images/fm/{$T.icon}.png" title="{$T.icon}" />
							   {#/for}
							   {#/if}
							</td>
							<td>
							<a href="{'/_utils/document.html?' + db_name + '/' + $T.row.value._id}" title="View in Futon"><img src="images/script.gif" border="0" /></a>
						    <a href="#" onclick="return deleteTag('{$T.row.value._id}');"><img src="images/cross-light.png"  border="0" title="Delete this tag instance." alt="Delete this tag instance."      onmouseover="this.src='images/cross.png'"  onmouseout="this.src='images/cross-light.png'"/></a>
						  
							</td>
                        </tr>
			{#/for}
		</table>
	</textarea></p>
    <!-- End Of template-->

  </body>
</html>
